<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            width: 1196px;
            height: 899px;
            margin: 0 auto;
        }
        
        header {
            width: 1196px;
            height: 133px;
        }
        
        header img {
            max-width: 100%;
        }
        
        main {
            width: 100%;
            height: 766px;
        }
        
        main .main_top {
            font-size: 12px;
            clear: both;
            margin-top: 6px;
            box-sizing: border-box;
            width: 100%;
            height: 43px;
        }
        
        .shop_info {
            float: left;
            box-sizing: border-box;
            width: 598px;
            height: 100%;
        }
        
        .shop_price {
            float: left;
            box-sizing: border-box;
            width: 152px;
            height: 100%;
        }
        
        .shop_number {
            float: left;
            box-sizing: border-box;
            width: 131px;
            height: 100%;
        }
        
        .shop_money {
            float: left;
            box-sizing: border-box;
            width: 89px;
            height: 100%;
        }
        
        .operation {
            float: left;
            box-sizing: border-box;
            width: 224px;
            height: 100%;
        }
        
        .shop_info .shop_one {
            float: left;
            width: 76px;
            height: 43px;
            line-height: 43px;
            text-align: center;
        }
        
        .shop_info .shop_one input[type="checkbox"] {
            margin-right: 4px;
        }
        
        .shop_info .shop_two {
            float: left;
            width: 187px;
            height: 43px;
            line-height: 43px;
            text-align: center;
        }
        
        .shop_price .shop_three {
            width: 152px;
            height: 43px;
            line-height: 43px;
            text-align: center;
        }
        
        .shop_number .shop_four {
            width: 131px;
            height: 43px;
            line-height: 43px;
            text-indent: 36px;
        }
        
        .shop_money .shop_five {
            width: 89px;
            height: 43px;
            line-height: 43px;
            text-indent: 15px;
        }
        
        .operation .shop_six {
            width: 224px;
            height: 43px;
            line-height: 43px;
            text-align: center;
        }
        
        main .shop {
            clear: both;
            box-sizing: border-box;
            width: 100%;
            height: 210px;
        }
        
        .shop .shop_name {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
        }
        
        .shop .shop_reduce {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            border: 1px solid #ccc;
        }
        
        .shop .shop_list {
            clear: both;
            font-size: 12px;
            box-sizing: border-box;
            width: 100%;
            height: 129px;
            border: 1px solid #ccc;
        }
        
        .shop_name .shop_seven {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
        
        .shop_name .shop_seven input[type="checkbox"] {
            float: left;
            margin: 14px 4px 0 14px;
        }
        
        .shop_name .shop_seven img {
            margin-top: 1px;
            float: left;
            width: 560px;
            height: 34px;
        }
        
        .shop_list .shop_info:nth-child(1) input[type="checkbox"] {
            float: left;
            margin: 20px 12px 0 25px;
        }
        
        .shop_list .shop_info:nth-child(1) img {
            margin-top: 20px;
        }
        
        .shop_list .shop_price:nth-child(2) {
            font-weight: bold;
        }
        
        .shop_list .shop_price:nth-child(2) .price_one {
            /* background: red; */
            color: #666;
        }
        
        .shop_list .shop_number:nth-child(3) .btn_list {
            margin: 19px 0 0 28px;
            width: 76px;
            height: 25px;
            background: #ccc;
        }
        
        .btn_list button {
            margin-left: 16px;
            width: 43px;
            height: 25px;
            outline: 0;
            border: 0;
            border: 1px solid #ccc;
        }
        
        .shop_list .shop_money:nth-child(4) .money_one {
            color: red;
            margin: 18px 0 0 25px;
        }
        
        .shop_list .operation:nth-child(5) {
            float: left;
            box-sizing: border-box;
            width: 220px;
            height: 100%;
        }
        
        .shop_list .operation:nth-child(5) .remove {
            box-sizing: border-box;
            margin: 22px 0 0 90px;
            display: block;
            width: 70px;
            height: 17px;
        }
        
        .shop_list .operation:nth-child(5) .delete {
            margin: 0px 0 0 90px;
            box-sizing: border-box;
            display: block;
            width: 30px;
            height: 17px;
        }
        
        .shop:nth-child(3) .shop_name .shop_seven img {
            margin-top: 8px;
            width: 305px;
            height: 23px;
        }
        
        .shop:nth-child(4) .shop_list {
            height: 130px;
        }
        
        .shop:nth-child(4) .shop_name .shop_seven img {
            width: 256px;
            height: 34px;
        }
        
        .shop:nth-child(4) .shop_list .shop_info img {
            float: left;
            margin-left: 40px;
            margin-top: -13px;
            width: 553px;
            height: 98px;
        }
        
        main .main_buttom {
            box-sizing: border-box;
            font-size: 12px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #e5e5e5;
        }
        
        .main_buttom input[type="checkbox"] {
            /* float: left; */
            margin-right: 4px;
        }
        
        .main_buttom span {
            margin-left: 25px;
            margin-right: 4px;
        }
        
        .main_buttom .shops_one {
            margin-left: 466px;
        }
        
        .main_buttom .style_red {
            color: red;
            font-weight: bold;
        }
        
        .main_buttom .prices {
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
        
        .main_buttom button {
            width: 118px;
            height: 50px;
            text-align: center;
            outline: none;
            border: 0;
            background: #b0b0b0;
        }
    </style>
</head>

<body>
    <header>
        <img src="./img/header.png" alt="header">
    </header>
    <main>
        <aside class="main_top">
            <div class="shop_info">
                <div class="shop_one"><input type="checkbox" name="checkbox_all" id="checkbox_all">全选</div>
                <span class="shop_two">
                    商品信息
                </span>
            </div>
            <div class="shop_price">
                <div class="shop_three">
                    单价
                </div>
            </div>
            <div class="shop_number">
                <div class="shop_four">
                    数量
                </div>
            </div>
            <div class="shop_money">
                <div class="shop_five">
                    金额
                </div>
            </div>
            <div class="operation">
                <div class="shop_six">
                    操作
                </div>
            </div>
        </aside>
        <aside class="shop">
            <div class="shop_name">
                <div class="shop_seven">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <img src="img/shop1.png" alt="shop">
                </div>
            </div>
            <div class="shop_reduce">
                <img src="./img/shop4.png" alt="shop">
            </div>
            <div class="shop_list">
                <div class="shop_info">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <img src="./img/shop5.png" alt="shop">
                </div>
                <div class="shop_price">
                    <div class="shop_three">
                        <p class="price_one"><del>￥10.00</del></p>
                        <p class="price_two">￥<span class="number">9.90</del></p>

                    </div>
                </div>
                <div class="shop_number">
                    <div class="btn_list">
                        <button class="btn">1</button> +
                    </div>
                </div>
                <div class="shop_money">
                    <p class="money_one">￥<span class="number">9.90</del></p>

                </div>
                <div class="operation">
                    <span class="remove">移入收藏夹</span>
                            <span class="delete">删除</span>

                    </div>
        </aside>

        <aside class="shop">
            <div class="shop_name">
                <div class="shop_seven">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <img src="img/shop2.png" alt="shop">
                </div>
            </div>
            <div class="shop_reduce">
                <img src="./img/shop4.png" alt="shop">
            </div>
            <div class="shop_list">
                <div class="shop_info">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <img src="./img/shop6.png" alt="shop">
                </div>
                <div class="shop_price">
                    <div class="shop_three">
                        <p class="price_one"><del>￥180.00</del></p>
                        <p class="price_two">￥<span class="number">14.90</del></p>

                    </div>
                </div>
                <div class="shop_number">
                    <div class="btn_list">
                        <button class="btn">1</button> +
                    </div>
                </div>
                <div class="shop_money">
                    <p class="money_one">￥<span class="number">14.90</del></p>

                </div>
                <div class="operation">
                    <span class="remove">移入收藏夹</span>
                            <span class="delete">删除</span>

                    </div>
        </aside>

        <aside class="shop">
            <div class="shop_name">
                <div class="shop_seven">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <img src="img/shop3.png" alt="shop">
                </div>
            </div>
            <div class="shop_reduce">
                <img src="./img/shop4.png" alt="shop">
            </div>
            <div class="shop_list">
                <div class="shop_info">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <img src="./img/shop7.png" alt="shop">
                </div>
                <div class="shop_price">
                    <div class="shop_three">

                        <p class="price_two">￥<span class="number">59.90</del></p>

                    </div>
                </div>
                <div class="shop_number">
                    <div class="btn_list">
                        <button class="btn">1</button> +
                    </div>
                </div>
                <div class="shop_money">
                    <p class="money_one">￥<span class="number">59.90</del></p>

                </div>
                <div class="operation">
                    <span class="remove">移入收藏夹</span>
                            <span class="delete">删除</span>

                    </div>
        </aside>
        <aside class="main_buttom">
            <input type="checkbox" name="check" id="checkbox_all">全选
            <span class="delete">删除</span><span class="lose">失效宝贝</span><span class="remove">移入收藏夹</span>
            <span class="shops_one">已选入的商品<span class="style_red" id="all_cases">0</span>件数</span>
            <span class="shops_two">合计（不含运费）：<span class="prices" id="all_prices">0.00</span></span>
            <button>结算</button>
        </aside>
    </main>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {


            //全选
            var checkbox = document.querySelectorAll("#checkbox");

            $(checkbox_all).eq(0).on("change", function() {
                $(".shop input").prop("checked", $(this).prop('checked'));
                $(checkbox_all).eq(1).prop("checked", $(this).prop('checked'));
            });
            $(checkbox_all).eq(1).on("change", function() {
                $(".shop input").prop("checked", $(this).prop('checked'));
                $(checkbox_all).eq(0).prop("checked", $(this).prop('checked'));
            });


            $(".shop input").change(function() {
                console.log($(".shop input:checked").length);
                if ($(".shop input:checked").length === $(".shop input").length) {
                    $(checkbox_all).eq(0).prop("checked", true);
                    $(checkbox_all).eq(1).prop("checked", true);

                    console.log(12);
                } else {
                    $(checkbox_all).eq(0).prop("checked", false);
                    $(checkbox_all).eq(1).prop("checked", false);

                }
            })


        })
    </script>
</body>

</html>